<template>
  <div class="xtx-checkbox">
    <!-- 选中小图标 -->
    <i v-if="checked" class="iconfont icon-checked" @click="toogleCheck"></i>
    <!-- 未选中小图标 -->
    <i v-else class="iconfont icon-unchecked" @click="toogleCheck"></i>
    <!-- 自定义文字 -->
    <span>
        <slot/>
    </span>
  </div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
  name: 'XtxCheckbox',
  props: {
    modelValue: { // v-model双向绑定，默认props接收的变量名必须是modelValue
      type: Boolean
    }
  },
  setup (props, ctx) {
    //   checked 选中状态 true 代表选中 false 代表未选中
    const checked = ref(false)

    // 实现通过v-model 完成父子组件的选中状态同步
    // 1. 绑定自定义属性 属性名 modelValue
    // 2. 绑定自定事件 事件名叫 update:modelValue emit('update:modelValue')
    // 3. 自定义事件绑定的回调函数中完成了对于自定义属性的赋值修改(这个值就是我们触发自定义事件时传递的实参)
    watch(
      () => {
        return props.modelValue
      },
      () => {
        checked.value = props.modelValue
      },
      { immediate: true }
    )
    function toogleCheck () {
      // 1. 完成状态切换
      checked.value = !checked.value
      // 2. 把当前最新的状态抛给父组件
      ctx.emit('update:modelValue', checked.value)
      // 增加一个自定义事件 change，为了同步vuex中的数据
      ctx.emit('change', checked.value)
    }
    return { checked, toogleCheck }
  }

}
</script>
<style scoped lang="less">
.xtx-checkbox {
  display: inline-block;
  margin-right: 2px;
  .icon-checked {
    color: @xtxColor;
    ~ span {
      color: @xtxColor;
    }
  }
  i {
    position: relative;
    top: 1px;
  }
  span {
    margin-left: 2px;
  }
}
</style>
